<template>
  <div class="pane-content">
    <a-form layout="vertical">
      <a-row :gutter="[12, 12]">
        <a-col :xs="24" :sm="12" v-if="content.use_bond == 1">
          <a-card size="small" :bordered="false">
            <template #title>
              <span class="text-title">保证金条款</span>
            </template>
            <a-row :gutter="12">
              <a-col :xs="24" :sm="12">
                <a-form-item label="保证金类型">
                  <a-select
                    v-model:value="formState.bond_clause.bond_type"
                    :options="optionsInit.bondType"
                  />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="12">
                <a-form-item label="保证金金额">
                  <a-input-group compact>
                    <a-input-number
                      style="width: 70%"
                      placeholder="保证金金额"
                      v-model:value="formState.bond_clause.bond_price"
                      :min="0"
                    />
                    <a-select
                      style="width: 30%"
                      v-model:value="formState.bond_clause.bond_unit"
                      :options="optionsInit.bond_unit"
                    />
                  </a-input-group>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="12" v-if="content.use_lease">
          <a-card size="small" :bordered="false">
            <template #title>
              <span class="text-title">{{ content.cost_type_name }}含税</span>
            </template>
            <a-row :gutter="12">
              <a-col :xs="24" :sm="12">
                <a-form-item label="含税规则">
                  <a-select
                    v-model:value="formState.tax_clause.taxRule"
                    :options="optionsInit.taxRule"
                  />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="12" >
                <a-form-item label="税率">
                  <a-input-group compact>
                    <a-input-number
                      style="width: 70%"
                      placeholder="保留两位小数"
                      v-model:value="formState.tax_clause.taxRate"
                      :min="0"
                      :precision="2"
                    />
                    <span class="item-unit">%</span>
                  </a-input-group>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-col>

        <a-col
          :span="24"
          v-for="(clauseItem, index) of formState.normalClause"
          :key="'nc_' + index"
        >
          <a-card size="small" :bordered="false">
            <template #title>
              <span class="text-title">
                {{
                  content.cost_type_txt +
                  (formState.normalClause.length > 1 ? index + 1 : "")
                }}
              </span>
            </template>
            <template #extra>
              <a-button
                type="link"
                danger
                v-if="formState.normalClause.length > 1"
                @click="onClauseItemRemove('normalClause', index)"
              >
                <template #icon>
                  <DeleteOutlined />
                </template>
              </a-button>
            </template>
            <a-row :gutter="12">
              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item label="单价">
                  <a-input-group compact>
                    <a-input-number
                      style="width: 60%"
                      placeholder="请输入"
                      v-model:value="clauseItem.contract_unit_price"
                      :min="0"
                    />
                    <a-select
                      style="width: 40%"
                      v-model:value="clauseItem.contract_price_unit"
                      :options="optionsInit.contract_price_unit"
                      @change="(val) => handlePriceUnitChange(val, clauseItem)"
                    />
                  </a-input-group>
                </a-form-item>
              </a-col>
              <a-col
                :xs="24"
                :md="8"
                :xxl="6"
                v-if="
                  !['unit_1', 'unit_4'].includes(clauseItem.contract_price_unit)
                "
              >
                <a-form-item label="天单价换算规则">
                  <a-select
                    v-model:value="clauseItem.convert_day_price"
                    :options="optionsInit.convert_day_price"
                  />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item>
                  <template #label>
                    <span>付款时间</span>
                    <a-tooltip v-if="clauseItem.payment_time_unit1 == 'unit_3'">
                      <template #title>
                        账单应收日期固定为当月的指定日期收款
                      </template>
                      <QuestionCircleOutlined
                        style="color: #999; margin-left: 5px"
                      />
                    </a-tooltip>
                  </template>
                  <a-input-group compact>
                    <a-select
                      style="width: 30%"
                      v-model:value="clauseItem.payment_time_unit1"
                      :options="optionsInit.payment_time_unit1"
                    />
                    <a-input-number
                      style="width: 40%"
                      placeholder="请输入"
                      v-model:value="clauseItem.payment_time"
                      :min="0"
                    />
                    <span
                      class="num-input-suffix"
                      v-if="clauseItem.payment_time_unit1 == 'unit_3'"
                      >日</span
                    >
                    <a-select
                      style="width: 30%"
                      v-model:value="clauseItem.payment_time_unit2"
                      :options="optionsInit.payment_time_unit2"
                      v-else
                    />
                  </a-input-group>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item label="计费类型">
                  <a-select
                    v-model:value="clauseItem.charge_type"
                    :options="optionsInit.charge_type_unit"
                  />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item label="年天数">
                  <a-input-group compact>
                    <a-input-number
                      style="width: 70%"
                      placeholder="请输入"
                      v-model:value="clauseItem.year_days"
                      :min="0"
                    />
                    <span class="item-unit">天</span>
                  </a-input-group>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item label="付款周期（几月一付）">
                  <a-input-group compact>
                    <a-input-number
                      style="width: 70%"
                      placeholder="请输入"
                      v-model:value="clauseItem.payCycle"
                      :precision="0"
                      :min="0"
                    />
                    <span class="item-unit">月</span>
                  </a-input-group>
                </a-form-item>
              </a-col>

              <a-col
                :xs="24"
                :md="8"
                :xxl="6"
                v-if="clauseItem.payment_time_unit1 == 'unit_3'"
              >
                <a-form-item label="指定日期">
                  <a-select
                    v-model:value="clauseItem.specify_date_unit"
                    placeholder="请选择"
                    :options="optionsInit.specify_date_unit"
                  >
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item label="租期划分方式">
                  <a-select
                    v-model:value="clauseItem.lease_divide"
                    :options="optionsInit.lease_divide_unit"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-col>

        <a-col
          :span="24"
          v-for="(clauseItem, index) of formState.discountClause"
          :key="'dc_' + index"
        >
          <a-card size="small" :bordered="false">
            <template #title>
              <span class="text-title">
                优惠条款
                {{ formState.discountClause.length > 1 ? index + 1 : "" }}
              </span>
            </template>
            <template #extra>
              <a-button
                type="link"
                danger
                @click="onClauseItemRemove('discountClause', index)"
              >
                <template #icon>
                  <DeleteOutlined />
                </template>
              </a-button>
            </template>
            <a-row :gutter="12">
              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item label="优惠类型">
                  <a-select
                    v-model:value="clauseItem.discount_type"
                    :options="optionsInit.discount_type"
                    @change="(val) => handleDiscountTypeChange(val, clauseItem)"
                  />
                </a-form-item>
              </a-col>
              <a-col
                :xs="24"
                :md="8"
                :xxl="6"
                v-if="
                  ['select_1', 'select_5'].includes(clauseItem.discount_type)
                "
              >
                <a-form-item label="免租期划分方式">
                  <a-select v-model:value="clauseItem.exempt_lease_type">
                    <template
                      v-for="item of optionsInit.exempt_lease_type"
                      :key="item.value"
                    >
                      <a-select-option
                        :value="item.value"
                        v-if="
                          (clauseItem.discount_type == 'select_1' &&
                            ['select_1', 'select_2'].includes(item.value)) ||
                          (clauseItem.discount_type == 'select_5' &&
                            ['select_3', 'select_4'].includes(item.value))
                        "
                      >
                        {{ item.label }}
                      </a-select-option>
                    </template>
                  </a-select>
                </a-form-item>
              </a-col>
              <template v-else>
                <a-col :xs="24" :md="8" :xxl="6">
                  <a-form-item label="开始期数">
                    <a-input-number
                      style="width: 100%"
                      placeholder="请输入"
                      v-model:value="clauseItem.stage_start"
                      :min="0"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :md="8" :xxl="6">
                  <a-form-item label="期长">
                    <a-input-number
                      style="width: 100%"
                      placeholder="请输入"
                      v-model:value="clauseItem.stage_num"
                      :min="0"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xs="24" :md="8" :xxl="6">
                  <a-form-item :label="clauseItem.discount_type_txt">
                    <a-input-group compact>
                      <a-input-number
                        style="width: 70%"
                        placeholder="请输入"
                        v-model:value="clauseItem.discount_num"
                        :min="0"
                      />
                      <span class="item-unit">
                        {{
                          clauseItem.discount_type == "select_2" ? "折" : "元"
                        }}
                      </span>
                    </a-input-group>
                  </a-form-item>
                </a-col>
              </template>
            </a-row>
          </a-card>
        </a-col>

        <a-col
          :span="24"
          v-for="(clauseItem, index) of formState.increaseClause"
          :key="'ic_' + index"
        >
          <a-card size="small" :bordered="false">
            <template #title>
              <span class="text-title">
                递增条款
                {{ formState.increaseClause.length > 1 ? index + 1 : "" }}
              </span>
            </template>
            <template #extra>
              <a-button
                type="link"
                danger
                @click="onClauseItemRemove('increaseClause', index)"
              >
                <template #icon>
                  <DeleteOutlined />
                </template>
              </a-button>
            </template>
            <a-row :gutter="12">
              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item label="单价递增">
                  <a-input-group compact>
                    <a-input-number
                      style="width: 70%"
                      placeholder="请输入"
                      v-model:value="clauseItem.incrPrice"
                      :min="0"
                    />
                    <a-select
                      style="width: 30%"
                      v-model:value="clauseItem.incrPriceUnit"
                      :options="optionsInit.price_increment_unit"
                    />
                  </a-input-group>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8" :xxl="6">
                <a-form-item label="保证金递增">
                  <a-input-group compact>
                    <a-input-number
                      style="width: 70%"
                      placeholder="请输入"
                      v-model:value="clauseItem.incrBond"
                      :min="0"
                    />
                    <a-select
                      style="width: 30%"
                      v-model:value="clauseItem.incrBondUnit"
                      :options="optionsInit.bond_increment_unit"
                    />
                  </a-input-group>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-col>

        <a-col :span="24">
          <a-space size="large">
            <a-button
              v-if="content.use_lease"
              type="dashed"
              @click="addNormalClause"
              key="add_normal_clause"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              {{ content.cost_type_txt }}
            </a-button>
            <a-button
              type="dashed"
              @click="addDiscountClause"
              key="add_discount_clause"
              v-if="content.use_discount == 1"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              优惠条款
            </a-button>
            <a-button
              type="dashed"
              @click="addIncreaseClause"
              key="add_increase_clause"
              v-if="content.use_incr == 1"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              递增条款
            </a-button>
          </a-space>
        </a-col>

        <!-- <a-col :span="24">
          <a-card size="small" :bordered="false">
            <template #title>
              <span class="text-title">条款备注</span>
            </template>
            <a-textarea
              placeholder="请输入备注内容"
              v-model:value="formState.remark_clause"
              :auto-size="{ minRows: 4 }"
            />
          </a-card>
        </a-col> -->
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, watch, ref } from "vue";
import {
  PlusOutlined,
  DeleteOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import store from "../../../../store";

export default defineComponent({
  name: "CTPaneContent",
  components: { PlusOutlined, DeleteOutlined, QuestionCircleOutlined },
  props: {
    content: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      optionsInit: {},
    });

    /** 条款表单 */
    const formState = reactive({
      // 保证金
      bond_clause: {
        bond_type: undefined,
        bond_price: "",
        bond_unit: "unit_2",
        currencyUnit: "CNY",
      },
      // 税率信息
      tax_clause: {
        taxRule: 1,
        taxRate: "",
      },
      // 备注
      //   remark_clause: "",
      // 租赁/物业条款
      normalClause: [],
      // 递增条款
      increaseClause: [],
      // 优惠条款
      discountClause: [],
    });
    // 租赁/物业条款表单
    const NCForm = {
      //合同单价
      contract_unit_price: "",
      contract_price_unit: "unit_1",
      // 付款时间
      payment_time: "",
      payment_time_unit1: "unit_1",
      payment_time_unit2: "unit_2",
      // 计费类型
      charge_type: "unit1",
      // 年天数
      year_days: 365,
      // 付款周期
      payCycle: "",
      // 租期划分方式
      lease_divide: "unit1",
    };
    // 递增条款表单
    const ICForm = {
      incrPrice: "",
      incrPriceUnit: "unit1",
      incrBond: "",
      incrBondUnit: "unit1",
    };
    // 优惠条款表单
    const DCForm = {
      discount_type: "select_1",
      exempt_lease_type: "select_1",
    };

    /** 添加条款 */
    // 租赁/物业条款
    const addNormalClause = () => {
      formState.normalClause.push({ ...NCForm });
    };
    // 优惠条款
    const addDiscountClause = () => {
      formState.discountClause.push({ ...DCForm });
    };
    // 递增条款
    const addIncreaseClause = () => {
      formState.increaseClause.push({ ...ICForm });
    };

    /** 删除条款 */
    const onClauseItemRemove = (clauseType, index) => {
      formState[clauseType].splice(index, 1);
    };

    /** 合同单价单位变化 */
    const handlePriceUnitChange = (value, clauseItem) => {
      if (["unit_1", "unit_4"].includes(value)) {
        delete clauseItem.convert_day_price;
      } else {
        // 非天单价， 需要添加 天单价换算规则 字段
        clauseItem.convert_day_price = ["unit_5", "unit_6"].includes(value)
          ? "convert_2"
          : "convert_1";
      }
    };

    /** 优惠类型变化 */
    const handleDiscountTypeChange = (value, clauseItem) => {
      if (["select_1", "select_5"].includes(value)) {
        delete clauseItem.stage_start;
        delete clauseItem.stage_num;
        delete clauseItem.discount_num;
        delete clauseItem.discount_type_txt;
        clauseItem.exempt_lease_type =
          value == "select_1" ? "select_1" : "select_3";
      } else {
        delete clauseItem.exempt_lease_type;
        clauseItem.discount_type_txt = state.optionsInit.discount_type.find(
          (item) => item.value == value
        ).label;
        clauseItem.stage_start = "";
        clauseItem.stage_num = "";
        clauseItem.discount_num = "";
      }
    };

    /** 初始化 */
    // 初始化条款内容
    const initClauseContent = () => {
      const { content } = props;
      if (content.tempClauseInfo) {
        // 存储的模板条款信息
        for (let key in formState) {
          formState[key] = content.tempClauseInfo[key];
        }
      } else {
        // 保证金类型
        if (content.attribute === "property") {
          // 物业保证金
          formState.bond_clause.bond_type = "bond_3";
        } else {
          // 租赁保证金
          formState.bond_clause.bond_type = "bond_2";
        }
        // 默认添加一个条款
        formState.normalClause = [];
        if (content.use_lease) {
          addNormalClause();
        }
        content.tempClauseInfo = { ...formState };
      }
    };

    const init = () => {
      if (Object.keys(props.content).length) {
        initClauseContent();
      }
      store.dispatch("GetTemplateInit").then((initData) => {
        state.optionsInit = initData;
      });
    };
    init();

    watch(
      () => props.content,
      (content, preContent) => {
        if (Object.keys(content).length && !Object.keys(preContent).length) {
          initClauseContent();
        }
      }
    );

    return {
      formState,
      ...toRefs(state),
      handlePriceUnitChange,
      handleDiscountTypeChange,
      addNormalClause,
      addIncreaseClause,
      addDiscountClause,
      onClauseItemRemove,
    };
  },
});
</script>

<style lang="less" scoped>
.pane-content {
  padding: 0 10px 50px 10px;
  :deep(.ant-card) {
    background: #f7f7f7;
  }
  :deep(.ant-card-head) {
    border-bottom: 1px solid #dedede;
  }
}
</style>
